<template>
  <dv-border-box-8 class="energy-usage-panel">
    <div class="panel-header">
      <i class="el-icon-water"></i>
      能源使用分析
    </div>
    
    <div class="energy-usage-content">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="energy-card">
            <div class="energy-title">电力使用</div>
            <div class="energy-value">{{ energyData.electricity }} kWh</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="energy-card">
            <div class="energy-title">水使用</div>
            <div class="energy-value">{{ energyData.water }} m³</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="energy-card">
            <div class="energy-title">碳排放</div>
            <div class="energy-value">{{ energyData.carbon }} kg</div>
          </div>
        </el-col>
      </el-row>
      
      <div class="energy-chart-container">
        <div ref="energyChart" class="energy-chart"></div>
      </div>
    </div>
  </dv-border-box-8>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  energyData: {
    type: Object,
    required: true
  }
})

const energyChart = ref(null)
let chartInstance = null

// 初始化图表
const initChart = () => {
  if (!energyChart.value) return
  
  chartInstance = echarts.init(energyChart.value)
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)'
    },
    series: [
      {
        type: 'pie',
        radius: '70%',
        center: ['50%', '50%'],
        data: [
          { value: props.energyData.electricity, name: '电力使用' },
          { value: props.energyData.water, name: '水使用' },
          { value: props.energyData.carbon, name: '碳排放' }
        ],
        itemStyle: {
          borderRadius: 5,
          borderColor: '#001529',
          borderWidth: 2
        },
        label: {
          color: '#fff',
          formatter: '{b}: {c} ({d}%)'
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ],
    color: ['#67c23a', '#409eff', '#f56c6c']
  }
  
  chartInstance.setOption(option)
}

// 监听窗口大小变化
const handleResize = () => {
  chartInstance && chartInstance.resize()
}

onMounted(() => {
  initChart()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  chartInstance && chartInstance.dispose()
})
</script>

<style scoped>
.energy-usage-panel {
  width: 100%;
  height: 350px;
  position: relative;
  padding: 15px;
}

.panel-header {
  font-size: 16px;
  color: #29b6ff;
  margin-bottom: 15px;
}

.energy-usage-content {
  height: calc(100% - 30px);
  display: flex;
  flex-direction: column;
}

.energy-card {
  background-color: rgba(24, 44, 78, 0.5);
  border-radius: 4px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.energy-title {
  font-size: 14px;
  color: #b9e0ff;
}

.energy-value {
  font-size: 22px;
  font-weight: bold;
  color: #fff;
}

.energy-chart-container {
  flex: 1;
  position: relative;
}

.energy-chart {
  width: 100%;
  height: 100%;
}
</style> 